<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>让坦克开起来</title>
		<style type="text/css">
			input{font-size:26px;margin-top: 20px;}
			body{background-image: url(../images/grassland.png);}
			#mytank{position: absolute;left:10px;top:100px}
		</style>
	</head>
	<body>		
		<img id="mytank" src="../images/right.png"/>
		<script>
			// 编写代码，让坦克能上下左右移动
			// 189000401 邓玉石
			let tank = document.querySelector('#mytank')
			//获取窗口大小
			let Tleft = window.innerWidth
			let Ttop = window.innerHeight
			console.log(Tleft,Ttop)
			window.addEventListener('load',function(){
				window.addEventListener('keypress',function(e){
					var e = e || window.event;  //标准化事件处理
        			var s = e.keyCode;  //获取键盘事件按下的值
					//移动
					switch(s){
						case 100 :
							tank.style.left = tank.offsetLeft + 10 + "px";
							tank.style.transform = 'rotate(0deg)'
							break;
						case 97 :
							tank.style.left = tank.offsetLeft - 10  + "px";
							tank.style.transform = 'rotate(180deg)'
							break;
						case 115 : 
							tank.style.top = tank.offsetTop  + 10 + "px";
							tank.style.transform = 'rotate(90deg)'
							break;
						case 119 :
							tank.style.top = tank.offsetTop  - 10 + "px";
							tank.style.transform = 'rotate(270deg)'
							break;
						case 68 :
							tank.style.left = tank.offsetLeft + 10 + "px";
							tank.style.transform = 'rotate(0deg)'
							break;
						case 65 :
							tank.style.left = tank.offsetLeft - 10  + "px";
							tank.style.transform = 'rotate(180deg)'
							break;
						case 83 : 
							tank.style.top = tank.offsetTop  + 10 + "px";
							tank.style.transform = 'rotate(90deg)'
							break;
						case 87 :
							tank.style.top = tank.offsetTop  - 10 + "px";
							tank.style.transform = 'rotate(270deg)'
							break;
        			}
					var top = parseInt(tank.style.top)
					var left = parseInt(tank.style.left)
					//超出范围
					if (left <= -50) {
						left = Tleft - 50
					}
					if (left > Tleft - 50) {
						left = 0
					}
					if (top > Ttop - 50) {
						top = 0
					}
					if (top <= -50) {
						top = Ttop - 50
					}
					tank.style.left = left + 'px'
					tank.style.top = top + 'px'
				})
				window.addEventListener('contextmenu',function(e){
					var e = e || window.event; 
					if(e.button == '2'){
						e.preventDefault()
					}
				})
			})
		</script>
	</body>
</html>
